<template>
  <div class="task flex flex-column">
    <van-nav-bar title="做单" />
    <div class="submit-box">
      <div class="input-box">
        <input placeholder="请输入手机号" v-model="order_data.phone"  />
      </div>
      <van-button type="primary" @click="start_order">开始做单</van-button>
      <van-notice-bar left-icon="info-o">
        （输入正确的手机号码后，点击开始做单即可接单）
      </van-notice-bar>
    </div>
    <van-notice-bar :scrollable="true" speed="40" color="#ff976a"  left-icon="volume-o" style="padding:0;border:0;height: 24px;font-size:.12rem">
      （{{sys_msg.payInfo}}）
      </van-notice-bar>
    <div class="platform-list flex-1">
      <div class="platform-head flex flex-align-center">
        <van-divider vertical />
        平台列表
      </div>
      <div class="platform-box">
        <van-row>
          <van-col v-for="platform in platform_list" :key="platform.id" span="12">
            <div
              class="platform-item flex flex-center"
              :class="{ active: selected_platform_list.indexOf(platform.platform) !== -1 }"
              @click="selected_platfor(platform)"
            >
              {{ platform.remark }}（{{ platform.score }}积分）
            </div>
          </van-col>
        </van-row>
        <van-notice-bar left-icon="info-o"> （默认选择所有平台，点击可取消）</van-notice-bar>
      </div>
      <div class="platform-head flex flex-align-center" v-if="order_list.length > 0">
        <van-divider vertical />
        验证码上传
      </div>
      <div class="platform-sumbit" v-if="order_list.length > 0">
        <div
          class="platform-sumbit-item flex flex-align-start"
          v-for="order in order_list"
          :key="order.id"
        >
          <div class="submit-btn">
            <van-button v-if="order.orderStatus === 'INIT'" disabled @click="to_msg_code(order)"
              >提交{{ order.platformName }}</van-button
            >
            <van-button style="color:#1989fa;background:#ecf9ff" v-if="order.orderStatus === 'PROCESS'" @click="to_msg_code(order)"
              >提交{{ order.platformName }}</van-button
            >
            <van-button v-if="order.orderStatus === 'CONFIRM'" disabled @click="to_msg_code(order)"
              >提交{{ order.platformName }}</van-button
            >
          </div>
          <div class="submit-input flex-1">
            <input
              v-if="order.orderStatus === 'INIT'"
              style="opacity: var(--van-button-disabled-opacity)"
              disabled
              v-model="order.msgCode"
              :placeholder="'请提交' + order.platformName + '验证码'"
            />
            <input
              style="color: #1989fa;;border: 1px solid #1989fa;"
              v-if="order.orderStatus === 'PROCESS'" 
              v-model="order.msgCode"
              :placeholder="'请提交' + order.platformName + '验证码'"
            />
            <input
              v-if="order.orderStatus === 'CONFIRM'"
              style="opacity: var(--van-button-disabled-opacity)"
              disabled
              v-model="order.msgCode"
              :placeholder="'请提交' + order.platformName + '验证码'"
            />
            <van-notice-bar :scrollable="false" v-if="order.orderStatus === 'INIT'">
              等待取号({{order.availableTime||0}}s):{{ order.phone }}
            </van-notice-bar>
            <van-notice-bar
              color="#1989fa"
              background="#ecf9ff"
              left-icon="info-o"
              v-if="order.orderStatus === 'PROCESS'"
            >
              上传验证码({{order.availableTime||0}}s):{{ order.phone }}
            </van-notice-bar>
            <van-notice-bar
              color="#ff976a"
              background="#fffbe8"
              left-icon="info-o"
              v-if="order.orderStatus === 'CONFIRM'"
            >
              等待确认({{order.availableTime||0}}s):{{ order.phone }}
            </van-notice-bar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import { showNotify } from 'vant'
import { getCurrentInstance } from '@vue/runtime-core'
import { inject, ref,onUnmounted } from 'vue'
const $ajax: any = inject('$ajax')
const $api: any = inject('$api')
const currentInstance: any = getCurrentInstance()
const $this = currentInstance.proxy
const pattern = /^1[3456789]\d{9}$/
let platform_list: any = ref([])
let order_list: any = ref([])
let sys_msg: any = ref({})
let selected_platform_list: any = ref([])
let order_data: any = ref({
  phone: ''
})

//系统消息
async function get_sys_msg() {
  const data = await $ajax({
    api: $api.sys_msg
  })
  let msg_list = data.data.sysConfigInfo
  msg_list.forEach(({key,configInfo}: any) => {
    sys_msg.value[key]=configInfo
  })
}
get_sys_msg()
//公告
async function get_platform_list() {
  const data = await $ajax({
    api: $api.platform_list
  })
  platform_list.value = data.data.platformList
  data.data.platformList.forEach((platform: any) => {
    selected_platform_list.value.push(platform.platform)
  })
}

get_platform_list()

async function get_order_list() {
  const data = await $ajax({
    api: $api.my_order_list
  })
  data.data.orderlist = data.data.orderlist.filter((item: any) => {
    return ['SUCCESS', 'FAIL'].indexOf(item.orderStatus) === -1
  })
  data.data.orderlist.map((item: any) => {
    order_list.value.forEach((_item: any) => {
      if (_item.orderId === item.orderId) {
        item.msgCode = _item.msgCode
      }
    })
    return item
  })
  order_list.value = data.data.orderlist
}
get_order_list()
let interval = setInterval(() => {
  get_order_list()
}, 1000)
onUnmounted(()=>{
  console.error('onUnmounted');
  clearInterval(interval);
})
//开始做单
async function start_order() {
  if (!order_data.value.phone || order_data.value.phone.length === 0) {
    showNotify({ type: 'danger', message: '手机号不能为空！' })
    return
  }
  if (!pattern.test(order_data.value.phone)) {
    showNotify({ type: 'danger', message: '手机号格式不正确！' })
    return
  }
  if (selected_platform_list.value.length === 0) {
    showNotify({ type: 'danger', message: '至少要选择一个平台！' })
    return
  }
  await $ajax({
    api: $api.to_phone,
    data: {
      phone: order_data.value.phone,
      platforms: selected_platform_list.value.join(',')
    }
  })
  showNotify({ type: 'success', message: '提交成功！' })
  get_order_list()
}
async function to_msg_code(order: any) {
  if (!order.msgCode || order.msgCode.length === 0) {
    showNotify({ type: 'danger', message: '验证码不能为空！' })
    return
  }
  await $ajax({
    api: $api.to_msg_code,
    data: {
      msgCode: order.msgCode,
      orderId: order.orderId
    }
  })
  showNotify({ type: 'success', message: '提交成功！' })
  get_order_list()
}
//选择平台
function selected_platfor(platform: any) {
  let index = selected_platform_list.value.indexOf(platform.platform)
  if (index === -1) {
    selected_platform_list.value.push(platform.platform)
  } else {
    selected_platform_list.value = selected_platform_list.value
      .slice(0, index)
      .concat(selected_platform_list.value.slice(index + 1))
  }
  // selected_platform_list.value = origin_selected_platform_list;
  $this.$forceUpdate()
}
</script>
<style lang="less" scoped>
.task {
  background: #e2eeff;
  min-height: 100%;
  font-size: 0.16rem;
  padding: 0.16rem;
  padding-top: 0;

  :deep(.van-nav-bar) {
    background: #e2eeff;
    font-family: 'PingFang SC';
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  :deep(.van-notice-bar) {
    height: 0.2rem;
    line-height: 0.2rem;
    background: transparent;
    padding-left: 0;
    font-size: 0.12rem;
    color: #999;

    .van-notice-bar__left-icon,
    .van-notice-bar__right-icon {
      min-width: 0.1rem;
    }
  }

  .submit-box {
    height: 1.5rem;
    background: #fff;
    border-radius: 0.04rem;
    margin-top: 0.16rem;
    padding: 0.16rem;

    .input-box {
      display: flex;
      width: 100%;
      height: 0.4rem;
      align-items: center;
      flex-shrink: 0;
      border-radius: 0.04rem;
      background: #f5f6f7;

      input {
        -webkit-appearance: none;
        -webkit-border-radius: 0px;
        font-size: 0.14rem;
        padding: 0.1rem;
        border: none;
        background: transparent;
        border-radius: 0;

        &:focus {
          outline: none;
        }
      }
    }

    :deep(.van-button) {
      height: 0.38rem;
      flex-shrink: 0;
      border-radius: 0.04rem;
      background: #3e6ff9;
      width: 100%;
      margin: 0.14rem 0;
    }
  }

  .platform-list {
    background: #fff;
    border-radius: 0.04rem;
    padding: 0.16rem;
    padding-top: 0.05rem;

    .platform-head {
      padding: 0.05rem 0;

      :deep(.van-divider--vertical) {
        background: linear-gradient(166deg, #77a4ff 1.38%, #5e81f5 107.65%);
        width: 0.05rem;
        color: #000;
        font-family: 'PingFang SC';
        font-size: 0.18rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border-radius: 0.04rem;
        margin: 0;
        margin-right: 0.04rem;
      }
    }

    .platform-box {
      margin-bottom: 0.1rem;

      .platform-item {
        height: 0.38rem;
        border-radius: 0.34rem;
        background: #f5f7f9;
        margin: 0.06rem;
        color: #505254;
        font-family: 'PingFang SC';
        font-size: 0.12rem;
        font-style: normal;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        &.active {
          background: #e2eeff;
          color: #6588ff;
        }
      }

      :deep(.van-notice-bar) {
        margin-left: 0.1rem;
      }
    }
  }

  .platform-sumbit {
    margin-top: 0.1rem;

    .platform-sumbit-item {
      margin-bottom: 0.18rem;

      .submit-btn {
        :deep(.van-button) {
          border-radius: 0.04rem;
          border: 1px solid #d7dff0;
          background: #f5f6f7;
          height: 0.35rem;
          width: 0.9rem;
          font-size: 0.14rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:focus,
          &:active,
          &:hover {
            outline: none;
            box-shadow: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-focus-ring-color: none;
          }
        }
      }

      .submit-input {
        padding-left: 0.14rem;

        input {
          height: 0.35rem;
          border-radius: 0.05rem;
          border: 1px solid #d7dff0;
          background: #fff;
          padding-left: 0.14rem;
          width: 100%;
          margin-bottom: 0.04rem;
          font-size: 0.13rem;
        }
      }
    }
  }
}
</style>
